<template>
  <view class="box">
    <view class="to"
          @click="toTo()"
          v-if="param.to">{{ handleTo(param) }}
      <view style="transform: rotate(-180deg);display: inline-block;margin-top: 10rpx;vertical-align: top">{{ "➠" }}
      </view>
    </view>
    <view style="height: 10rpx"></view>
    <view class="input-box">
      <view class="verify-code-input-box">
        <input
            class="code-input"
            type="password"
            @focus="focus()"
            @blur="blur()"
            v-model="param.value"
            maxlength="32"
            :adjust-position="false"
            :placeholder="isFocus?'':'Password'">
        </input>
      </view>
      <view style="height: 50rpx"></view>
      <view>
        <view v-show="!isCheck">
          <kt-button
              v-show="isSending"
              style="opacity: .8"
              @click="login()">{{ surplusTime }}
          </kt-button>
          <kt-button
              v-show="!isSending"
              ref="loginButton"
              @click="login()">
            Login
          </kt-button>
        </view>
        <view v-show="isCheck">
          <kt-button ref="checkButton">···</kt-button>
        </view>


      </view>
    </view>

  </view>
</template>

<script>

import VerifyBox from "@/pages/login/components/VerifyBox.vue";

export default {
  components: {VerifyBox},
  data() {
    return {
      isFocus: false,
      param: {
        to: "",
        typeCode: "",
        value: "",
        loginTypeCode: "verificationCode"
      },
      isSending: false,
      // 剩余时间(秒)
      surplusTime: 0,
      // 是否校验中
      isCheck: false,

    };
  },
  created() {
    if (this.$kt.storage.get("loginParam")) {
      this.param = this.$kt.storage.get("loginParam");
    }

    // 设置剩余时间
    let sendCodeTime = this.$kt.storage.get("sendCodeTime");
    if (sendCodeTime) {
      let surplusTime = 60 - Math.floor((new Date().getTime() - sendCodeTime) / 1000);
      if (surplusTime > 0) {
        this.startCountDown(surplusTime);
      }
    }
  },
  methods: {
    login() {
      // 如果密码为空
      if(this.param.value === ""){
        // 提示输入密码
        this.$refs.loginButton.error("Please enter a password");
        return;
      }

      this.$refs.loginButton.loading();
      this.$kt.request.send({
        uri: "/business-erp-web/erpEmp/login",
        data: {
          username: this.param.to,
          password: this.param.value,
          // 企业ID
          enterpriseId: this.$emp.getCurrentEnterprise().id
        },
        stateSuccess: (res) => {
          this.$kt.storage.set("token", res.data.token);
          this.$refs.loginButton.success(res.msg, 1500);
          this.$kt.userAccount.setSelf(res.data.userAccount);
          this.$kt.userAccount.setIsLogin(true);
          this.$kt.request.send({
            uri: "/business-erp-web/erpEmp/getSelf",
            data: {
              enterpriseId: this.$emp.getCurrentEnterprise().id
            },
            stateSuccess: (empRes) => {
              this.$emp.setSelf(empRes.data);
            }
          });

          // 发送登录成功事件
          this.$kt.event.emit("login:success");
          uni.reLaunch({
            url: '/pages/body/body'
          })
        },
        stateFail: (err) => {
          this.$refs.loginButton.error(err.errMsg);
        },
      });
    },
    /**
     * 开启倒计时
     */
    startCountDown(surplusTime) {
      if (this.isSending) {
        return;
      }
      this.isSending = true;
      this.surplusTime = surplusTime;
      let interval = setInterval(() => {
        this.surplusTime--;
        if (this.surplusTime <= 0) {
          clearInterval(interval);
          this.isSending = false;
          this.surplusTime = 60;
        }
      }, 1000);
    },

    /**
     * toTo
     */
    toTo() {
      this.$emit("toTo");
    },

    /**
     * 处理to的值
     */
    handleTo(param) {
      if (param.to === "") {
        return "";
      }
      // 将@前面的字符替换为*，只保留开始和结尾的字符
      let split = param.to.split("@");
      // 开始的字符
      let start = split[0].substring(0, 1);
      // 如果小于3个字符，直接返回
      if (split[0].length <= 3) {
        return param.to;
      }

      // 如果大于5位数
      if (split[0].length > 5) {
        return split[0].substring(0, 3) + "***";
      }

      // 结尾的字符
      let end = split[0].substring(split[0].length - 1, split[0].length);
      // 中间的*号数量
      let middle = split[0].length - start.length - end.length;
      // 中间的*号
      let middleStr = "";
      for (let i = 0; i < middle; i++) {
        middleStr += "*";
      }
      return start + middleStr;

    },

    focus() {
      this.param = this.$kt.storage.get("loginParam");
      this.isFocus = true;
    },
    blur() {
      this.isFocus = false;
      this.$emit("blur");
    },

  },
}
</script>

<style lang="scss" scoped>
.box {
  text-align: center;
}

.input-box {
  width: 600rpx;
  margin: 0 auto;
  position: relative;
}

.input {
  font-size: 40rpx;
  letter-spacing: 20rpx;
}

.line {
  width: 100%;
  height: 2px;
  border-radius: 5rpx;
  background-color: #000;
  margin-top: 10px;
}

.verify-code-input-box {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.to {
  font-size: 40rpx;
  color: #000000;
  letter-spacing: 1rpx;
}

.to:active {
  opacity: .8;
  transform: scale(.98);
}

.code-input {
  width: 100%;
  height: 100%;
  font-size: 32rpx;
  text-align: center;
  border: none;
  outline: none;
  background-color: #f2f2f2;
  padding: 30rpx 10rpx 30rpx 10rpx;
  box-sizing: border-box;
  letter-spacing: 5rpx;
  border-radius: 20rpx;
  font-weight: bold;
}


</style>
